<template>
  <el-row :gutter="15">
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="fhbOrderNo" style="position: relative">
                <el-input v-model="search.fhbOrderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="fhbOutOrderNo" style="position: relative">
                <el-input v-model="search.fhbOutOrderNo" type="textarea" :rows="4" placeholder="来源单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneeName">
                <el-input v-model="search.consigneeName" placeholder="客户姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneePhone">
                <el-input v-model="search.consigneePhone" placeholder="客户电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="address">
                <cascade-address :level="3" changeOnSelect v-model="search.address" placeholder="客户地址:省/市/区"></cascade-address>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                  <el-option
                    v-for="item in serviceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="costTypeNo">
                <el-select v-model="search.costTypeNo" clearable placeholder="费用类型">
                  <el-option
                    v-for="item in costTypeArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="costName">
                <el-input v-model="search.costName" placeholder="费用名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderSource">
                <el-select v-model="search.orderSource" clearable placeholder="订单来源">
                  <el-option
                    v-for="item in orderSourceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-show="isOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="colorFlag">
                  <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                    <el-option v-for="item in colorArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.startFoundDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单结束日期"
                                  v-model="search.endFoundDate"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-order/pay-management/find-pay-initiate-list"
        :columns="columns"
        :tabs="tabs"
        :showButtonGroup="false"
        @selection-change="selectionChange"
      >
        <template slot="buttons">
          <el-button type="primary" :loading="costLoading" @click="sendApprove">发起审批</el-button>
        </template>
        <template slot="preColumn">
          <el-table-column prop="fhbOrderNo" fixed="left" width="170px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.fhbOrderNo }}</a>
              <span v-if="scope.row.colorFlag && scope.row.colorFlag !== 'gray'" :style="{'font-size':'20px', 'color': 'scope.row.colorFlag'}"><i class="fa fa-flag" ></i></span>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {filterDataBaseDictionary, unixTimestampFilter, filterSecond} from '@/filters'
import {getFhbServiceType, getFhbOrderSource, getSubDictListOfParentCode} from '@/utils/selectOptions'
import {copy, dotData, alert, confirm} from '@/utils'
import {isFormatNumberStringUtil} from '@/utils/validatorUtil'
export default {
  name: 'paymentApprovePendingIndex',
  components: {
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter,
    filterSecond
  },
  data() {
    let columns = [
      {
        label: '费用流水',
        data: 'payNumber'
      },
      {
        label: '费用类型',
        data: 'costType'
      },
      {
        label: '费用名',
        data: 'costName'
      },
      {
        label: '费用金额',
        data: 'money',
        render(data, full) {
          // if (full.costTypeNo === 'FUWU02') {
          //   return `<input type="text" value="${data}" onkeyup='if(isNaN(value))execCommand("undo")' class="prefix-${full.id}" />`
          // } else {
          //   return `<span value="${data}" class="prefix-${full.id}">` + data + `</span>`
          // }
          return data
        }
      },
      {
        label: '是否驳回',
        data: 'status',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '订单来源',
        data: 'orderSource',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '下单时间',
        width: '134px',
        data: 'foundTime',
        render: (data, full) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm:ss')
        }
      },
      {
        label: '服务类型',
        data: 'service'
      },
      {
        label: '收件人',
        data: 'consigneeName'
      },
      {label: '收件电话', data: 'consigneePhone'},
      {
        label: '收件地址',
        data: '',
        render(data, full) {
          return `${full.province} ${full.city} ${full.district}`
        }
      }
    ]
    return {
      visible: false,
      visibleResult: false,
      subOrderFinish: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      isOpen: false,
      searchLoading: false,
      checkedData: [],
      search: {
        fhbOrderNo: '',
        fhbOutOrderNo: '',
        consigneeName: '',
        consigneePhone: '',
        address: [],
        serviceNo: '',
        costTypeNo: '',
        costName: '',
        orderSource: '',
        colorFlag: '',
        startFoundDate: '',
        endFoundDate: ''
      },
      costLoading: false,
      serviceArr: [],
      orderSourceArr: [],
      checkOrderArr: [],
      costTypeArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      columns: columns,
      tabs: []
    }
  },
  created() {
    getFhbServiceType().then(data => {
      this.serviceArr = data
    })
    getFhbOrderSource().then(data => {
      this.orderSourceArr = data
    })
    getSubDictListOfParentCode('FUWU').then(data => {
      this.costTypeArr = data
    })
  },
  methods: {
    selectionChange(arr) {
      this.checkedData = arr
    },
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let data = copy(this.search)
        data.provinceNo = dotData(data.address, '[0]') || ''
        data.cityNo = dotData(data.address, '[1]') || ''
        data.districtNo = dotData(data.address, '[2]') || ''
        delete data.address
        this.searchLoading = true
        basicTable.search(data).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    show(data) {
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    sendApprove() {
      if (!this.checkedData.length) {
        alert('请选择要操作的订单！', '提示', 'warning')
        return
      }
      let sponsorAuditList = []
      for (let i = 0; i < this.checkedData.length; i++) {
        let v = this.checkedData[i]
        let cost = window.$('.prefix-' + v.id).val()

        if (v.costTypeNo === 'FUWU02') {
          if (cost && isFormatNumberStringUtil(cost, 2, 7) && (parseFloat(cost) > 0 || parseFloat(cost) === 0)) {
            v.money = cost
          } else {
            alert('请输入追加费用（小数位最长为2位，整数位最长为7位的正数）')
            this.costLoading = false
            return
          }
        }
        sponsorAuditList.push({id: v.id, money: v.money})
      }
      this.costLoading = true
      // 提交
      this.$confirm('确认是否对勾选的' + this.checkedData.length + '项费用发起支付审批?<br>如果您勾选的费用包含订单服务费，提交后订单会从"我的订单-待发起"中消失，需要通过审批后再"支付审批-待支付"中支付', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.$ajax.post('/ms-fahuobao-order/pay-management/sponsor-audit', sponsorAuditList).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            confirm('发起审批成功', undefined, {type: 'success'}).then(_ => {
              this.$router.push({path: '/redirect/ss-fhb/paymentApprove/pending/index'})
            }).finally(_ => {
              this.searchFunc(this.search)
            })
          } else {
            this.costLoading = false
          }
        })
      }).catch(() => {
        this.costLoading = false
      })
    }
  }
}
</script>
